<template>
  <section class="block mb-10 bg-fff border-left-radius-5 border-right-radius-5"
    :style="{ height: `${props.height}px` }" @click="clickPost(props.id)">
    <n-image :width="props.width" :height="props.height" class="image border-left-radius-5" :src="props.image"
      object-fit="cover" preview-disabled />
    <div class="content">
      <div class="header ">
        <div class="time">
          {{ $dayjs(props.time).format("YYYY年MM月DD日") }}
        </div>
        <template v-for="(item, index) in props.tags" :key="index">
          <n-button class="nuxt-link" text @click="(e) => toLink(e, item)">
            {{ item.name }}
          </n-button>
        </template>
      </div>
      <h2 class="title">{{ props.title }}</h2>
      <p class="summary double-line">{{ props.summary }}</p>
    </div>
  </section>
</template>

<script setup lang="ts">
import { NImage, NButton } from "naive-ui";
//子组件接收
interface classifyType {
  id: Number;
  name: String;
}
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    default: "",
    required: true,
  },
  width: {
    type: [String, Number],
    default: "100",
    required: false,
  },
  height: {
    type: [String, Number],
    default: "100",
    required: false,
  },
  tags: {
    type: Array as PropType<classifyType[]>,
    default: null,
    required: false,
  },
  time: {
    type: Date,
    required: false,
  },
  title: {
    type: String,
    required: false,
  },
  summary: {
    type: String,
    required: false,
  },
});
const toLink = (event: { stopPropagation: () => void }, item: classifyType) => {
  event.stopPropagation(); // 上层加上这行代码，可以阻止点击穿透
  navigateTo({
    path: "/search",
    query: {
      tagId: String(item.id),
    },
  });
};
const clickPost = (id: String) => {
  navigateTo(`/post/${id}`);
};
</script>
<style lang="scss" scoped>
.block {
  display: flex;
  padding: 0;
  cursor: pointer;
  overflow: hidden;

  &:hover {
    transform: scale(1.02);
  }

  .content {
    flex: 1;
    padding: 2%;
    padding-top: calc(2% + 20px);
    overflow: hidden;
    position: relative;

    .header {
      max-width: 100%;
      height: 20px;
      display: flex;
      position: absolute;
      top: 4%;

      .time,
      .nuxt-link {
        padding-right: 10px;
        display: inline;
        white-space: nowrap;
        float: left;
      }

      .nuxt-link:hover {
        transform: scale(1.02);
        background-color: rgb(243 244 246);
        border-radius: 5px;
      }
    }

    @media (max-width: 768px) {
      top: 2%;
    }

    .title {
      font-size: var(--block-font-size);
      line-height: var(--block-line-height);
      margin: 12px 0 0 0;
    }
  }
}
</style>
